<template>
	<sl-page title="选择银行卡">
		<view class="bankCards">
			<z-paging ref="paging" :paging-style="{'margin-top':CustomBar + 'px'}" v-model="bankCards"
				@query="loadPage">
				<view class="bankCards-page">
					<view class="item" v-for="(item, index) in bankCards" :key="index"
						@click.stop="onSelectBankCards(item)">
						<view class="m-b10">
							{{item.bankName}}
						</view>
						<view class="f-24 m-b60">
							{{item.bankDepositName}}
						</view>
						<view class="f-32">
							{{item.cardNo}}
							<!-- {{cardNo(item.cardNo)}} -->
						</view>
					</view>
				</view>
			</z-paging>
			<sl-flooter>
				<view class="btn-primary" @click="$app.navTo(pages.createAccountPage)">添加银行卡</view>
			</sl-flooter>
		</view>
	</sl-page>
</template>

<script>
	import * as Util from '@/utils/index.js';
	import AccountApi from '@/api/finance/account.js';
	import Constants from '@/constants';
	//
	export default {
		//
		name: 'bankCards',
		//
		mixins: [Constants],
		//
		components: {},
		//
		data() {
			return {
				//
				options: {},
				//
				query: {},
				//
				bankCards: [],
				//是否可以执行选择银行卡方法
				isSelectBankCards: false
			};
		},
		// computed: {
		// 	cardNo: () => {
		// 		return (cn) => (cn > 0 ? Util.formatBankCardNumber(cn) : '--');
		// 	},
		// },
		//
		onLoad(options) {
			this.options = options;
			//初始化参数
			this.initPara();
		},
		//
		onShow() {},
		//
		methods: {
			//
			initPara() {
				// this.isSelectBankCards = this.options.isSelectBankCards ? this.options.isSelectBankCards : false;
				this.isSelectBankCards = true;
			},
			//加载我的顾客
			loadPage: async function() {
				try {
					const res = await AccountApi.query();
					this.$refs.paging.complete(res.obj);
				} catch (error) {
					console.error('【bankCards:loadPage】:', error);
					this.$refs.paging.complete(false);
				}
			},
			//确定订单页面选择地址
			onSelectBankCards(item) {
				if (!this.isSelectBankCards) {
					return
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.getBankCardsCallback(item); //重点$vm
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bankCards {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;

		.bankCards-page {
			margin-top: 24rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;

			.item {
				margin-top: 24rpx;
				height: 130px;
				flex-shrink: 0;
				border-radius: 10px;
				background: linear-gradient(135deg, #1FA0D7 10.35%, #0D73D0 100%);
				box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);
				padding: 30rpx 32rpx;
				color: #fff;
			}
		}
	}
</style>